<template>
  <div
    style="display: flex; justify-content: space-between; align-items: center"
  >
    <div>
      <span style="margin-right: 15px">credit1: 总积分</span>
      <span style="margin-right: 15px">credit2: 可提现余额</span>
      <span style="margin-right: 15px">credit4: 被冻结的积分</span>
    </div>
    <el-button type="primary">添加</el-button>
  </div>
  <div style="height: calc(100% - 78px); margin: 15px 0">
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      height="100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="handleValidateSelectable"
      />
      <el-table-column prop="id" label="#ID"></el-table-column>
      <el-table-column
        prop="openid"
        label="openid"
        min-width="240"
      ></el-table-column>
      <el-table-column prop="credittype" label="credittype"></el-table-column>
      <el-table-column prop="num" label="num"></el-table-column>
      <el-table-column prop="operator" label="operator"></el-table-column>
      <el-table-column prop="createtime" label="createtime"></el-table-column>
      <el-table-column
        prop="remark"
        label="remark"
        min-width="240"
      ></el-table-column>
      <el-table-column
        prop="presentcredit"
        label="presentcredit"
      ></el-table-column>
      <el-table-column prop="userOwnId" label="userOwnId"></el-table-column>
      <el-table-column prop="ordersn" label="ordersn"></el-table-column>
      <el-table-column prop="updatetime" label="updatetime"></el-table-column>
    </el-table>
  </div>
  <el-pagination
    v-model:currentPage="pageOpts.page.value"
    :page-sizes="pageOpts.sizes.value"
    :page-size="pageOpts.size.value"
    :layout="pageOpts.layout.value"
    :total="pageOpts.total.value"
    small
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  getRepairList,
  // getRepairDetail,
  // updateRepair,
  actionRepairModule
} from '@/apis/repair';
import { InitPageOpts } from '@/utils/common';
import type { ElTable } from 'element-plus';

// 加载状态
const isLoading = ref(false);

// ref - table
const tableRef = ref<InstanceType<typeof ElTable>>();

// 列表数据
let tableData = ref<any[]>();

// 分页数据
const pageOpts = InitPageOpts({
  page: 1,
  size: 80
});

// 切换显示条数
const handleSizeChange = (size: number) => {
  pageOpts.size.value = size;
  pageOpts.page.value = 1;
  requestData();
};

// 切换页数
const handleCurrentChange = (page: number) => {
  pageOpts.page.value = page;
  requestData();
};

// 勾选
const multipleSelection = ref<any[]>([]);
const handleSelectionChange = (list: any[]) => {
  multipleSelection.value = list;

  actionRepairModule('findOrderListByIncome', {
    firstAward: '7.35',
    secondAward: '',
    createTime: '1600996671'
  }).then((res) => {
    console.log('actionRepairModule', res);
  });
};

// 判断当前行能否勾选
const handleValidateSelectable = (row: any) => {
  return !row.updatetime;
};

// 获取分页数据
const requestData = () => {
  const dataOpt = {
    field: 'all',
    page: pageOpts.page.value,
    limit: pageOpts.size.value
  };

  // 开始加载
  isLoading.value = true;

  getRepairList('user-income-otn', dataOpt)
    .then((res) => {
      tableData.value = res.data.data || [];
      pageOpts.total.value = res.data.total;

      // 加载结束
      isLoading.value = false;
    })
    .catch((err) => {
      console.log('table list error', err);
      // 加载结束
      isLoading.value = false;
    });
};

requestData();
</script>

<style lang="scss" scoped></style>
